<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>食品安全多源异构数据挖掘技术平台</title>
		<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="/css/select2.min.css">
		<link href="/css/common.css" type="text/css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="/css/nav.css">
		<link rel="stylesheet" type="text/css" href="/css/iconfont.css">
		<script src="/js/jquery-3.2.1.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
        <script src="/js/select2.min.js"></script>
		<script src="/layui/layui.js"></script>
		<script src="/js/alert.js"></script>
		<script src="/js/echarts.min.js"></script>
		<style>
			.grid-demo2{text-align: center;}
			.grid-demo, .grid-demo3{padding: 10px;height: 63px;line-height: 43px;text-align: center;background-color: #fff;color: #333;text-align: left;font-size:16px;-ms-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);-o-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2);}
			.grid-demo3 {height: 380px;}
			.grid-demo .t1{font-weight: 600}
			.grid-demo .t2{font-size: 12px; margin-top: -20px; display: block; color: #999}

			.grid-demo-bg1{height: 110px}
			.benjidu{
				background: url(/images/icon-arrow-right.png) no-repeat center right #fff;
			}
			.benniandu{
				background: url(/images/icon/fwkz.png) no-repeat center right #fff;
			}

			@media screen and (max-width: 1440px) {
				.grid-demo-bg1 img{display: none}
			}
		</style>
	</head>
	<body>
		<!-- 头部导航 -->
		<div class="jzy_w_max jzy_h_50 br_12">
			<!--菜单1-->
			<div class="jzy_h_50 br_12 br_11_hove lt top-txt">
				<a class="cr_h_0 fs_14" href="">食品安全多源异构数据挖掘技术平台</a>
			</div>
			<!--头像-->
			<div class="jzy_w_50 jzy_h_50 br_12 br_11_hove rt top-txt logo">
				<img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36">
				<!-- 头像下拉菜单 -->
				<div class="jzy_w_270 jzy_h_408 br_h_0 top_nav">
					<!--头像跟用户名-->
					<div class="jzy_w_max jzy_h_50 lt" style="margin-top: 15px"><img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36"></div>
					<div class="jzy_w_max jzy_h_30 lt" style="line-height: 30px; border-bottom: 1px solid #e2e2e2">17812100232</div>
					<!--用户公共操作权限-->
					<div class="jzy_w_250 jzy_h_250 lt" style="padding: 10px">
						<div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
							<a>
								<p class="jzy_h_30"><img src="/images/icon/jbzl.png"></p>基本资料
							</a>
						</div>
						<div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
							<a>
								<p class="jzy_h_30"><img src="/images/icon/smrz.png"></p>基本资料
							</a>
						</div>
					</div>
					<!--退出登录-->
					<div class="jzy_w_max jzy_h_42 lt br_h_9" style="background: #f5f5f6; line-height: 45px"><a href="/index">退出平台</a></div>
				</div>
			</div>
			<!--菜单3-->
			<div class="jzy_w_90 jzy_h_50 br_12 br_11_hove rt top-txt">
				<a class="cr_h_0 fs_14">权限设置</a>
				<!-- 头像下拉菜单 -->
				<div class="jzy_w_90 br_h_0 top_nav nav2">
					<p class="p"><a href="">新建权限</a></p>
					<p class="p"><a href="">角色列表</a></p>
				</div>
			</div>
		</div>
		<!--左侧主导航-->
		<div class="jzy_w_180 lt main_height main_left nav" style="background: #333744">
			<div class="nav-top">
				<div id="mini" style="background: #4a5064; text-align: center"><img src="/images/icon/suofang.png" width="20"></div>
			</div>
			<ul>
				<li class="nav-item" id="home">
					<a href="/page/home"><i class="my-icon nav-icon"></i><span>首页</span></a>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>分类</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/LR"><span>LR</span></a></li>
						<li><a href="/page/model"><span>SVM</span></a></li>
						<li><a href="/page/modelList"><span>决策树</span></a></li>
						<li><a href="/page/job"><span>贝叶斯</span></a></li>
					</ul>
				</li>
				<li class="nav-item nav-show">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>回归</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/MCAlgorithm"><span>最小二乘回归</span></a></li>
						<li class="nav-show"><a href="/page/MLJoblist"><span>贝叶斯回归</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>聚类</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href=""><span>KNN</span></a></li>
						<li><a href=""><span>K-means</span></a></li>
						<li><a href=""><span>层次聚类</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>降维</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href="/page/PCA"><span>PCA</span></a></li>
						<li><a href=""><span>kernal-PCA</span></a></li>
						<li><a href=""><span>FactorAnalysis</span></a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="javascript:;"><i class="my-icon nav-icon"></i><span>集成</span><i class="my-icon nav-more"></i></a>
					<ul>
						<li><a href=""><span>Bagging</span></a></li>
						<li><a href=""><span>随机森林</span></a></li>
						<li><a href=""><span>GBDT</span></a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!--主内容框架-->
		<div class="main_height main_index lt" style="background: #f2f4f8;">
			<div class="layui-btn-group demoTable jzy_w_max br_h_0 tabTop">
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="createModel">新建任务</button>
				<button class="layui-btn layui-btn-sm layui-btn-normal clickTab" style="margin-right: 0px!important;">打开搜索面板</button>
			</div>
			<div style="width:100%;padding-left: 1px;">
				<table id="modelListTable" lay-filter="modelListTable"></table>
			</div>
		</div>
		<!--多功能面板-->
		<div id="divTab" class="divTab">
			<!--固定头部-->
			<div class="jzy_tab_top">
				<img src="/images/icon/gongneng.png" class="lt">
				<div class="txt lt">搜索面板</div>
				<div class="on rt" id="onTab">×</div>
			</div>
			<div class="jzy_tab_main">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend>搜索条件</legend>
				</fieldset>
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item">
							<label class="layui-form-label">模型名称</label>
							<div class="layui-input-block">
								<input id="searchName" type="text" name="name" style="width:190px;" placeholder="请输入模型名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input id="searchTable" class="layui-btn layui-btn-sm layui-btn-normal"  readonly="true" data-type="reload" value="搜索">
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--弹窗添加或修改内容必备的代码-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增任务</h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="name">名称</label>
							<input type="text" name="name" class="form-control" id="name" placeholder="名称">
						</div>
						<div class="form-group">
							<label for="selectAlgorithm">算法</label>
							<li  class="form-control" style="padding: 6px 0px;" >
								<select class="form-control" name="selectAlgorithm" id="selectAlgorithm"></select>
							</li>
						</div>
						<div class="form-group">
							<label for="selectDataSets">数据集</label>
							<li class="form-control" style="padding: 6px 0px;" >
								<select class="form-control" name="selectDataSets"  id="selectDataSets" ></select>
							</li>
						</div>
						<div class="form-group">
							<label for="description">描述</label>
							<input type="text" name="description" class="form-control" id="description" placeholder="输入描述内容">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
						<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="sterilizedmilkGraphicalModel" tabindex="-1" role="dialog" aria-labelledby="sterilizedmilkGraphical">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="sterilizedmilkGraphical">执行结果</h4>
					</div>
					<div class="modal-body">
						<div class="layui-row layui-col-space10" style="padding:0px 10px">
							<div class="layui-col-md8"><div class="grid-demo3"><div class="jzy_w_max jzy_h_350" id="demo-1"></div></div></div>
							<div class="layui-col-md4"><div class="grid-demo3"><div class="jzy_w_max jzy_h_380" id="demo-2"></div></div></div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="modal fade" id="faultDiagnosisGraphicalModel" tabindex="-1" role="dialog" aria-labelledby="faultDiagnosisGraphical">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="faultDiagnosisGraphical">新增任务</h4>
					</div>
					<div class="modal-body">
						<div class="layui-row layui-col-space10" style="padding:0px 10px">
							<div class="layui-col-md8"><div class="grid-demo3"><div class="jzy_w_max jzy_h_350" id="demo-1"></div></div></div>
							<div class="layui-col-md4"><div class="grid-demo3"><div class="jzy_w_max jzy_h_380" id="demo-2"></div></div></div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript" src="/js/nav.js"></script>
		<script src="/js/jump.js"></script>
		<!-- 这里的 checked 的状态只是演示 -->
		<script type="text/html" id="switchTpl">
			<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="detail">点击查看执行结果</a>
		</script>
		<!-- 这里的 操作 的html插入演示 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" style="padding:0 15px !important;" lay-event="del1">删除</a>
			<a class="layui-btn layui-btn-xs" style="padding:0 15px !important;" lay-event="exe" >执行</a>
		</script>
		<script type="text/javascript" th:inline="javascript">

		    var modelTableList=null;
			/*<![CDATA[*/
			var modelHref= /*[[@{/page/model?}]]*/ null;
			/*]]>*/
			/*<![CDATA[*/
			var jobHref= /*[[@{/page/job?}]]*/ null;
			/*]]>*/
			$("#btn_submit").on('click',function(){
				//ajax请求
				alert("ajax请求");
                //刷新列表 如果成功则刷新列表
                table.reload('modelListTable',{});
			});
			var algorithmList=[
				{
					id: 0,
					text: '算法1'
				},
				{
					id: 1,
					text: '算法2'
				},
				{
					id: 2,
					text: '算法3'
				},
				{
					id: 3,
					text: '算法4'
				},
				{
					id: 4,
					text: '算法5'
				}
			];
			var dataSetList=[
				{
					id: 0,
					text: '/data/BUCT_II/data/mnist_data'
				},
				{
					id: 1,
					text: '/Users/jochen/Documents/lab/myth/Myth/Myth/data/mnist_data'
				},
				{
					id: 2,
					text: 'D:\\Programsworkspace\\myth\\code\\Mythnew\\Myth\\data\\mnist_data'
				}
			];

		    $("#createModel").on('click',function(){
                $('#selectAlgorithm').select2({
                    data:algorithmList ,
                    language: "zh-CN",//汉化
                });
                $('#selectDataSets').select2({
                    data:dataSetList,
                    language: "zh-CN",//汉化

                });
				$('#myModal').modal();


            });

			var myChart = echarts.init(document.getElementById('demo-1'));
			var option = {
				title : {
					text: '食品数据预警任务',
					subtext: '已执行'
				},
				tooltip : {
					trigger: 'axis'
				},
				legend: {
					data:['脂肪','蛋白质','酸度']
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				calculable : true,
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data : ['1月','2月','3月','4月','5月','6月','7月']
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'脂肪',
						type:'line',
						smooth:true,
						itemStyle: {normal: {areaStyle: {type: 'default'}}},
						data:[10, 12, 21, 54, 260, 830, 710]
					},
					{
						name:'蛋白质',
						type:'line',
						smooth:true,
						itemStyle: {normal: {areaStyle: {type: 'default'}}},
						data:[30, 182, 434, 791, 390, 30, 10]
					},
					{
						name:'酸度',
						type:'line',
						smooth:true,
						itemStyle: {normal: {areaStyle: {type: 'default'}}},
						data:[1320, 1132, 601, 234, 120, 90, 20]
					}
				]
			};
			myChart.setOption(option);


			layui.use(['form', 'table', 'laydate', 'tree'], function() {
				var table = layui.table,
					form = layui.form,
					laydate = layui.laydate;
				laydate.render({
					elem: '#date',
					type: 'datetime',
					value: new Date()
				});
				// 开启一个数据表格
			      modelTableList=table.render({
					elem: '#modelListTable',
					method:'post',
					url: '/getModelListAll.do' ,//数据接口
					page: true,//开启分页
					limit: 10,//默认分页条数
					height: 'full', //高度最大化
					  id:'modelListTable',
					cols: [
							[ //表头
								{
									type: 'checkbox'
								} ,// 开启多选框
								{
									field: 'id',
									title:'ID',
									hide:'true',
									align: 'center',

								} // 开启多选框
								, {
									field: 'name',
									title: '名称',
									width: '25%',
									align: 'center',
									edit: 'false'
								}, {
									field: 'modelString',
									title: '算法',
									width: '15%',
									align: 'center'
								}, {
									field: 'timeChange',
									title: '创建时间',
									width: '15%',
									align: 'center',
									sort: true,
                                    templet: function(d){return layui.util.toDateString(d.timePublish, "yyyy-MM-dd HH:mm:ss");},
								}, {
									field: 'modelString',
									title: '执行结果',
									width: '20%',
									align: 'center',
									templet: '#switchTpl',
									unresize: true,
									event:'showModelString'
								}
								, {
									field: 'operation',
									title: '操作',
									width: '21.5%',
									align: 'center',
									toolbar: '#barDemo'
								}
							]
						],
						// 默认数据
					parseData: function(res){ //res 即为原始返回的数据
						  return {
							  "code": res.status, //解析接口状态
							  "count":res.count,
							  "data": res.data, //解析数据列表
						  };
					  }
				});
				var $ = layui.$, active = {
					reload: function(){
						var searchName=$("#searchName").val();
						//执行重载
						table.reload('modelTable', {
							method:'post',
							url: '/getModelByName.do' ,//数据接口
							page: {curr: 1},
							where: {name: searchName},
							parseData: function(res){ //res 即为原始返回的数据
								var searchresult=[];
								searchresult.push(res.data);
								return {
									"code": res.status, //解析接口状态
									"data": searchresult, //解析数据列表
									"count":1,
								};
							},
						});
					}
				};
				$("#searchTable").on('click',function(){
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
				// 监听数据表格中的单元格编辑
				table.on('tool(modelListTable)', function(obj){
					var data = obj.data;
					console.log(data)
					if(obj.event == 'del1'){
					 	layer.confirm('确认删除吗？', function(index){
						$.ajax({
							type: "POST",
							dataType: "json",
							url: "/modelRemoveByName.do",
							data: {
								"name":data.name
							},
							success: function (response) {
								 if(response.status==0){
									table.reload('modelTable',{});
								 }else{
									 layer.alert("删除失败！请先删除运用该模型的任务");
								 }
							},
							error : function() {
								layer.alert("提交失败");
							}
						});
						layer.close(index);
					  });
					} else if(obj.event == 'edit'){
					    location.href = modelHref;
					}else if(obj.event === 'showModelString'){
						console.log(data.modelString);
						var modelString=JSON.stringify(data.modelString);
						console.log(modelString);
						$('#sterilizedmilkGraphicalModel').modal();
					  	//location.href = modelHref+"modelString="+ null +"&modelname="+data.name ;
					}else if(obj.event === 'exe'){
						location.href=jobHref+"modelname="+data.name+"&modelId="+data.uuid;
					}
				 });
			});
		</script>
	</body>
</html>
